import { IconFont } from '@/components/iconFont'
import { Input, Modal } from 'antd'
import {
  RefObject,
  useEffect,
  useImperativeHandle,
  useRef,
  useState
} from 'react'
import { PersonList } from './PersonList'

export interface TreePopProps {
  innerRef: RefObject<{ showModal: () => void } | undefined>
  type?: string
  associationId?: string
  onChange?(value: string): void
}

export type selectListObj = {
  entId: string
  name: string
  phone?: string
  icon?: string
}

export function ChoiceCompany(props: TreePopProps) {
  const { innerRef, type, associationId, onChange } = props
  const [isModalOpen, setIsModalOpen] = useState(false)

  //定义搜索内容
  const [keyWords, setKeyWords] = useState<string>('')
  //定义是否开启过滤
  const [filter, setFilter] = useState(false)
  const switchChange = (checked: boolean) => {
    setFilter(checked)
  }
  //准备提交的员
  const [readyId, setReadyId] = useState<string[]>([])
  const [readyPerson, setReadyPerson] = useState<any[]>([])
  //选择的人员
  const [selectIdlist, setSelectIdlist] = useState<string[]>([])
  const [selectPsersonlist, setSelectPsersonlist] = useState<any>([])
  /*弹窗事件start-------------------*/
  const showModal = () => {
    setSelectIdlist([...readyId])
    setSelectPsersonlist([...selectPsersonlist])
    setIsModalOpen(true)
  }

  // ok事件触发函数
  const handleOk = () => {
    setKeyWords('')
    setReadyId([...selectIdlist])
    setReadyPerson([...selectPsersonlist])
    setIsModalOpen(false)
    const ids = selectIdlist.join(',')
    onChange && onChange(ids)
    // onChange && onChange({ idList: selectIdlist, list: selectPsersonlist })
  }

  const handleCancel = () => {
    setKeyWords('')
    setIsModalOpen(false)
  }

  //把事件给外面用
  useImperativeHandle(innerRef, () => ({
    showModal
  }))

  /*弹窗事件End-------------------*/

  //定义刷新
  const [fresh, reFresh] = useState<boolean>(false)
  //刷新
  const listRef = useRef<any>(null)
  useEffect(() => {
    listRef.current?.getList({
      entId: 'xxx',
      keyWord: keyWords
      // filter: filter,
    })
  }, [fresh, filter])

  //列表定义
  //选择回调 车辆人员都用这个 懒得改名字了
  const plChange = (data: { idList: string[]; list: any[] }) => {
    setSelectIdlist([...data.idList])
    setSelectPsersonlist([...data.list])
  }
  const delItem = function (item: selectListObj) {
    listRef.current.removeItem(item)
  }

  return (
    <>
      <Modal
        maskClosable={false}
        className="select-org-staff"
        width={'auto'}
        centered
        bodyStyle={{ padding: '0' }}
        title={'选择企业'}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        destroyOnClose={true}
      >
        {/* --------------------选择列表start----------------*/}
        <div
          className="chocie-staff-content main"
          style={{ margin: '6px 16px' }}
        >
          <div className="box-area" style={{ paddingRight: '11px' }}>
            <div className="title">选择: </div>
            <div className="panel">
              <div style={{ marginLeft: 6, marginRight: 6 }}>
                <div
                  style={{
                    height: 54,
                    display: 'flex',
                    alignItems: 'center'
                  }}
                >
                  <Input
                    prefix={<IconFont type="icon-search"></IconFont>}
                    placeholder={'请输入企业名称'}
                    value={keyWords}
                    allowClear
                    onChange={(e) => {
                      setKeyWords(e.target.value)
                      queueMicrotask(() => {
                        reFresh((v) => !v)
                      })
                    }}
                  ></Input>
                  <IconFont
                    type="icon-refresh"
                    style={{
                      width: 32,
                      height: 32,
                      fontSize: 20,
                      marginLeft: 8
                    }}
                    onClick={() => {
                      reFresh((v) => !v)
                    }}
                  ></IconFont>
                </div>
              </div>
              <div className="list-area">
                <div className="listbo active">
                  <PersonList
                    associationId={associationId}
                    innerRef={listRef}
                    searchVal={keyWords}
                    filter={filter}
                    defaultValue={selectIdlist}
                    onChange={(e: {
                      idList: string[]
                      list: selectListObj[]
                    }) => plChange(e)}
                  ></PersonList>
                </div>
              </div>
            </div>
          </div>
          <div
            className="sec-area"
            style={{ paddingLeft: '11px', height: 462 }}
          >
            <div className="title">已选:</div>
            <div
              className="panel"
              style={{ height: 'calc(100% - 40px)', overflowY: 'auto' }}
            >
              <ul className="list">
                {selectPsersonlist?.map((x: any, i: number) => {
                  return (
                    <li
                      key={i}
                      className="list-item"
                      style={{ display: 'flex', alignItems: 'center' }}
                    >
                      <div
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          width: 'calc(100% - 32px)'
                        }}
                      >
                        <IconFont
                          style={{
                            width: 32,
                            height: 32,
                            fontSize: 20,
                            color: '#5c80ff'
                          }}
                          type="icon-qiye1"
                        />
                        <span className="item-name item-pname" title={x.name}>
                          {x.name}
                        </span>
                        {/* <span className="item-phone text-center">
                          ({x.phone})
                        </span> */}
                      </div>
                      <IconFont
                        type="icon-close"
                        style={{
                          width: 32,
                          height: 32,
                          fontSize: 20,
                          color: '#fa541c'
                        }}
                        onClick={() => {
                          delItem(x)
                        }}
                      ></IconFont>
                    </li>
                  )
                })}
              </ul>
            </div>
          </div>
        </div>
      </Modal>
    </>
  )
}
